<%--
  Created by IntelliJ IDEA.
  User: Fmc
  Date: 2022/6/25
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>菜单管理</title>
        <link rel="stylesheet" href="../../static/layui-main/dist/css/layui.css">
        <script src="../../static/layui-main/src/layui.js"></script>
    </head>
    <body>
        <!--实现添加菜单的form-->
        <form class="layui-form" action="" id="addMenuForm" style="display: none">
            <input hidden name="createBy" value="${username}">
            <div class="layui-form-item">
                <input type="hidden" name="parentId" id="parent_id">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-inline">
                    <input type="text" name="parentName" placeholder="单击选择上级菜单"
                           autocomplete="off"
                           class="layui-input parent_name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="menuType" lay-filter="menuType-filter" value="M" title="目录">
                    <input type="radio" name="menuType" lay-filter="menuType-filter" value="C" title="菜单" checked="">
                    <input type="radio" name="menuType" lay-filter="menuType-filter" value="F" title="按钮">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="menuName" required lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item menu_url">
                <label class="layui-form-label">请求地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="url" placeholder="请输入请求地址" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item menu_perms">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-inline">
                    <input type="text" name="perms" placeholder="请输入权限标识" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示排序</label>
                <div class="layui-input-inline">
                    <input type="number" name="orderNum" required lay-verify="required" placeholder="请输入显示排序" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="remark" lay-verify="" placeholder="请输入备注信息" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit id="saveMenuButton" lay-filter="formSaveMenu">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <!--实现编辑菜单功能的form-->
        <form class="layui-form" action="" id="updateMenuForm" lay-filter="update_menu_form_filter" style="display: none">
            <input hidden name="updateBy" th:value="${session.username}">
            <div class="layui-form-item">
                <input type="hidden" name="parentId" id="updateParentId">
                <input type="hidden" name="menuId">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-inline">
                    <input type="text" name="parentName" placeholder="单击选择上级菜单"
                           autocomplete="off"
                           class="layui-input parent_name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="menuType" lay-filter="menuType-filter" value="M" title="目录">
                    <input type="radio" name="menuType" lay-filter="menuType-filter" value="C" title="菜单" checked="">
                    <input type="radio" name="menuType" lay-filter="menuType-filter" value="F" title="按钮">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="menuName" required lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item menu_url">
                <label class="layui-form-label">请求地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="url" placeholder="请输入请求地址" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item menu_perms">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-inline">
                    <input type="text" name="perms" placeholder="请输入权限标识" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示排序</label>
                <div class="layui-input-inline">
                    <input type="number" name="orderNum" required lay-verify="required" placeholder="请输入显示排序" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="remark" lay-verify="" placeholder="请输入备注信息" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit  lay-filter="formUpdateMenu">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <div class="layui-form-item" id="parentMenu" style="display: none">
            <label class="layui-form-label">菜单权限</label>
            <div class="layui-input-inline">
                <div id="menuTreeChoose" class="demo-tree-more"></div>
            </div>
        </div>

        <table id="showMenu" lay-filter="test"></table>
    </body>
    <!--menu顶部工具栏-->
    <script type="text/html" id="menuToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-xs" lay-event="addMenu">
                <i class="layui-icon layui-icon-add-1"></i>添加
            </button>
            <button id="expandAll" class="layui-btn layui-btn-xs layui-btn-primary">
                <i class="layui-icon layui-icon-shrink-right"></i>展开全部
            </button>
            <button id="foldAll" class="layui-btn layui-btn-xs layui-btn-primary">
                <i class="layui-icon layui-icon-spread-left"></i>折叠全部
            </button>
        </div>
    </script>
    <!--实现菜单管理操作功能按钮-->
    <script type="text/html" id="menuBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        // 加载treeTable.js文件
        // 自定义layui组件的目录
        layui.config({
            base : '../../static/layui-main/src/modules/'
        }).extend({
            //设定组件别名
            treeTable : 'treeTable',
        });


        layui.use(['layer', 'jquery', 'form', "treeTable", "tree", 'util'],function (){
            let layer = layui.layer;
            let $ = layui.jquery;
            let form = layui.form;
            let util = layui.util;
            let treeTable = layui.treeTable;
            let tree = layui.tree;

            // tbale表单渲染
            treeTable.render({
                elem: '#showMenu'
                , url: '${pageContext.request.contextPath}/menu/selectAllMenu.do'
                , toolbar: '#menuToolbar'
                , title: 'menuTable'
                , tree: {
                    iconIndex: 2,
                    isPidData: true,//开启父子结构
                    idName: 'menuId',
                    pidName: 'parentId'
                }
                , defaultToolbar: ['filter', 'exports', 'print']
                , cols: [[
                    {type: 'numbers'},
                    {field: 'menuId', title: '编号', minWidth: 40},
                    {field: 'menuName', title: '菜单名称', minWidth: 140},
                    {field: 'orderNum', title: '排序', minWidth: 30},
                    {field: 'url', title: '请求地址', minWidth: 80},
                    {field: 'menuType', title: '类型', minWidth: 50,
                        templet: function (type) {
                            if (type.menuType === 'M') {
                                return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">目录</button>'
                            } else if (type.menuType === 'C') {
                                return '<button type="button" class="layui-btn  layui-btn-xs">菜单</button>'
                            } else {
                                return '<button type="button" class="layui-btn  layui-btn-warm layui-btn-xs">按钮</button>'
                            }
                        }
                    },
                    {field: 'perms', title: '权限标识'},
                    {field: 'remark', title: '备注'},
                    {field: 'createTime', title: '创建时间'},
                    {fixed: 'right', align: 'center', toolbar: '#menuBar', title: '操作', width: 120}
                ]]
            });

        })
    </script>
</html>
